import Taro from '@tarojs/taro'
import { View, Text, Image, } from '@tarojs/components'
import { AtSearchBar, AtTabBar, AtList,AtListItem,AtActivityIndicator } from 'taro-ui'

import Actions from '../../utils/actions'
import Api from '../../utils/api'
import Utils  from '../../utils/utils'
import Global from '../../utils/global'

import './list.scss';

export default class List extends Taro.Component {
  constructor() {
    super(...arguments)
    this.state = {
      searchText: '',
      tabIndex: 0,
      list:[],
      badges:[0,0,0],
      loading:true
    }
  }

  config: Taro.Config = {
    navigationBarTitleText: '工单跟踪'
  }

  async componentWillMount(){
    const res = await Api.request(Actions.TODO)
    const data = res.data
    this.setState({
      list:data.list,
      loading:false
    })
  }

  onSearchTextChange(value) {
    this.setState({
      searchText: value
    })
  }

  tabClick(value) {
    this.setState({
      tabIndex: value
    })
  }

  handleListItemClick(wo){
    Global.set('wo',wo)
    Taro.navigateTo({
      url: '/pages/wo/detail'
    })
  }

  getUndispatchedList(){
    const {list,badges} = this.state
    let badge = 0
    const com = (<AtList>
    {list.map(item =>{
      if(item.action === 'start'){
        badge++
        return <AtListItem
        title={item.work_order.code+'-'+item.work_order.cate.title}
        note={item.work_order.desc}
        //extraText={item.work_order.desc}
        arrow='right'
        thumb={Global.config.cdnServer+'/images/undispatched.png'}
        onClick={this.handleListItemClick.bind(this,item.work_order)}
      />
      }
    })}
    </AtList>)
    if(badge != badges[0]){
      let new_badges = badges
      new_badges[0] = badge
      this.setState({
        badges:new_badges
      })
    }
    return com
  }

  getUnfinishedList() {
    const {list} = this.state
    return (<AtList>
    {list.map(item =>{
      if(item.action === 'dispatch'){
        return <AtListItem
        title={'['+item.work_order.code+']'}
        note={item.work_order.cate.title}
        arrow='right'
        thumb={Global.config.cdnServer+'/images/unfinished.png'}
      />
      }
    })}
    </AtList>)
  }

  getUnconfirmList() {
    const {list} = this.state
    return (<AtList>
    {list.map(item =>{
      if(item.action === 'finish'){
        return <AtListItem
        title={'['+item.work_order.code+']'}
        note={item.work_order.cate.title}
        arrow='right'
        thumb={Global.config.cdnServer+'/images/unconfirmed.png'}
      />
      }
    })}
    </AtList>)
  }

  render() {
    const {tabIndex,searchText,badges,loading} = this.state

    let tabList = [
      { title: '未受理'},
      { title: '处理中'},
      { title: '待确认' }
    ];

    for(let i=0;i<badges.length;i++){
      if(badges[i] > 0){
        tabList[i].text = badges[i]
      }
    }

    return (
      <View>
        {loading && <AtActivityIndicator content='正在登录...' mode='center'></AtActivityIndicator>}
        <View style="padding:5px;">
          <AtSearchBar
            value={searchText}
            placeholder='工单查询'
            onChange={this.onSearchTextChange.bind(this)}
          />
          <AtTabBar
            tabList={tabList}
            onClick={this.tabClick.bind(this)}
            current={tabIndex}
          />
          {tabIndex == 0 && this.getUndispatchedList()}
          {tabIndex == 1 && this.getUnfinishedList()}
          {tabIndex == 2 && this.getUnconfirmList()}
        </View>
      </View>

    )
  }
}

